<template>
	<div id="notice_select_target">
		<div class="form">
			<div class="row">
				<el-select v-model="param.roleId" placeholder="全部角色" style="width:1.6rem" clearable>
					<el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId">
					</el-option>
				</el-select>
				&nbsp;
				<el-input v-model="param.keyword" style="width: 2.6rem;" maxLength="50"
					 placeholder="搜索 校区/账户名" clearable>
				</el-input>
				&nbsp;
				<div class="search_btn" @click="search()">搜索</div>
			</div>
			<div class="tree">
				<el-tree
					ref="tree"
					:data="showList"
	  				show-checkbox
	  				node-key="id"
	  				:default-checked-keys="checkList"
	  				:default-expanded-keys="[0]"
	  				:props="props">
				</el-tree>
			</div>
		</div>
		<div class="btn_div">
			<div class="btn_sure" @click="sure()">确定选择</div>
			<div class="btn_cancel" @click="cancel()">取 消</div>
		</div>

	</div>
</template>

<script>
	var vm, dict;
	var param = {
		roleId: "",
		keyword: "",
	}
	export default {
		data: function() {
			return {
				param: tool.clone(param),
				roleList: [],
				props: {
	          		label: 'label',
	          		children: 'children'
	        	},
	        	checkList:[], //默认选择id数组
	        	targetList : null, //树形总数据
	        	showList: [], //树形显示数据,根据条件变化
			}
		},
		methods: {
			init: function(checkList) {
				//初始化
				vm.param = tool.clone(param);
				vm.checkList = checkList;
				//已经加载好了数据
				if(vm.targetList) {
					vm.search();
				}
			},
			cancel: function() {
				vm.$emit('cancel');
			},
			search: function() {
				vm.showList = tool.clone(vm.targetList);
				let p = vm.param;
				//遍历校区
				let campusList = vm.showList[0].children;
				for(let i=0; i<campusList.length; i++) {
					//校区对象
					let campus = campusList[i];
					let check1 = null;
					//检测关键词
			        if(p.keyword) {
			        	check1 = (campus.label.indexOf(p.keyword)>=0);
			        }
					
					//遍历用户
					let userList = campus.children;
					for(let j=0; j<userList.length; j++) {
						//用户对象
						let user = userList[j];
						//默认符合
						let check2 = true;
						
						//当有关键词时,必须自己包含或者校区包含关键词
						if(p.keyword) {
				        	check2 = (user.label.indexOf(p.keyword)>=0 || check1);
				        }
				        //当有角色时,必须自己有包含
				        if(p.roleId) {
				        	check2 = (user.roleIdList.indexOf(p.roleId)>=0 && check2);
				        }
						//不符合条件,剔除
						if(!check2) {
							userList.splice(j,1);
							j--;
							//非完整
							campus.isFull = false;
						}
					}
					//校区里面的用户被剔除光,则剔除校区
					if(userList.length == 0) {
						vm.showList[0].isFull = false;
						campusList.splice(i,1);
						i--;
					}
				}
				//如果全部校区里面的校区被剔除光,则剔除全部校区
				if(campusList.length == 0) {
					vm.showList.splice(0,1);
				}
				
			},
			sure: function() {
				let target = this.$refs.tree.getCheckedNodes();
				let [a, b, c] = [[], [], []];
				let len = 0;
				//满人标志
				let [aFull, bFull] = [true, true];
				//根据级别分类
				target.forEach(function(item) {
					if(item.level == 1) {
						a.push(item);
						aFull = aFull && item.isFull;
					}
					if(item.level == 2) {
						b.push(item);
						bFull = bFull && item.isFull;
						len += item.children.length;
					}
					if(item.level == 3) {
						c.push(item);
					}
				});
				//没有选中一个用户
				if(c.length == 0) {
					vm.$emit('ok',{ type: null, idList: []});
					vm.$emit('cancel');
					return;
				}
				//存在被选中的校区,里面的用户不满,肯定为部分用户
				if(!bFull) {
					vm.$emit('ok',{ type: 2, idList: c });
					vm.$emit('cancel');
					return;
				}
				//如果选中用户数量,不等于被选中的校区里面的用户数量和(用户是满的)
				//说明有些用户不在被选中的校区中,即存在校区没有全选,故为部分用户
				if(c.length != len) {
					vm.$emit('ok',{ type: 2, idList: c });
					vm.$emit('cancel');
					return;
				}
				//全部校区被选中,并且是满的
				if(a.length == 1 && aFull) {
					vm.$emit('ok',{ type: 0, idList: a });
					vm.$emit('cancel');
					return;
				}
				//剩下就是部分校区被选中并且是满的情况
				vm.$emit('ok',{ type: 1, idList: b });
				vm.$emit('cancel');
			},
		},
		created: function() {
			vm = this;
			dict = tool.getItem(lsKey.dict, true);
			
			//获取角色列表
			api.roleListForUser({}).then(function(data) {
				data.list.forEach(function(item) {
					if(item.roleMode == 2 || item.roleMode == 3) {
						vm.roleList.push(item)
					}
				})
			});
			//根据校区分组用户
			api.userGroupByCampus().then(function(data){
				let campusList = [];
				//遍历校区
				data.list.forEach(function(item) {
					let campus = {
						id: item.campusEntity.campusId,
						label: item.campusEntity.name,
						level: 2,
						isFull: true,
						children: []
					}
					//遍历用户
					item.userList.forEach(function(user) {
						campus.children.push({
							id: campus.id + ":" +user.userId, //加上校区id否则不是唯一标志
							label: user.nickName,
							level: 3,
							roleIdList: user.roleIdList
						})
					})
					//加到校区数组中
					campusList.push(campus);
				});
				vm.targetList = [{
					id: 0,
		          	label: '全部校区',
		          	level: 1,
		          	children: campusList,
		          	isFull: true
				}];
				vm.search();
			});
		}
	}
</script>
<style lang="scss">
	#notice_select_target {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		.input_search {
			.el-input__inner {
				background-color: rgb(247, 248, 250);
			}
		}
	}
</style>
<style scoped src="@/style/module/dialog_button.css"></style>
<style scoped>
	.form {
		font-size: 0.16rem;
		color: #666666;
	}
	
	.row {
		line-height: 0.36rem;
		padding: 0.07rem 0;
	}
	.tree {
		margin: 0.15rem auto 0 auto;
		padding: 0.1rem;
		letter-spacing: 0.01rem;
		width: 5.2rem;
		max-height: 4.32rem;
		border: 1px solid rgb(220,223,230);
		border-radius: 0.05rem;
		overflow: auto;
	}
	.tree::-webkit-scrollbar {
		width: 0.03rem;
	}
	.tree::-webkit-scrollbar-thumb {
		border-radius: 0.03rem;
    	background: #3885F8;
	}
</style>